<template>
	<view>
		<!-- 未登录页面 -->
		<view v-if="!loginStatus">
			<view class="height-180"></view>
			<view class="btc-tbr-large pb-2">
				<view class="pb-4">
					<view class=" gui-text-center ">
						<image class="gui-list-image animateInfinite pulse" style="width: 280rpx;height: 280rpx;" src="/static/images/dianpu.jpg" mode="widthFix"></image>
					</view>
					<view class="pt-2 gui-text-center">
						<view class="gui-h4 gui-bold main-text-color">网上购物能生钱</view>
						<view class="gui-list-title-desc gui-color-gray mt-1">测测测测测呃呃呃呃册</view>
					</view>
				</view>
				<view class="fx-f fx-f-ajc mt-2 gui-text-center">
					<button type="primary" class="gui-button logo-btn btc-tbr-large width-440" @tap="pageFn.navigateToQueryFn('/pages/login/wxLogin')">登录/注册</button>
				</view>
				<view class="gui-text-center mt-1"><p class="btc-black6 gui-list-title-text">了解橙品</p></view>
			</view>
		</view>
		<!-- 已登录页面 -->
		<view v-if="loginStatus">
			<view class="height-500 main-bg-color2 box-radius-button-30">
				<view class="height-100"></view>
				<view class="gui-list-items mx-3 gui-border-b">
					<view class="gui-list-image gui-relative">
						<image class="gui-list-image" :src="userInfo.avatar"></image>
						<!-- <view class="gui-badge-point"></view> -->
					</view>
					<view class="gui-list-body ">
						<view class="gui-list-title">
							<text class="gui-list-title-text gui-color-white">{{ userInfo.username }}</text>
							<!-- <text class="gui-list-title-desc gui-color-gray">08/18/2020</text> -->
						</view>
						<text class="gui-list-body-desc gui-color-white">描述信息</text>
					</view>
					<!-- <text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text> -->
				</view>
				<view class="my-3 mx-3"><text class="gui-list-title-text upgrade-title gui-color-white">入驻上家</text></view>

				<view>
					<guiComCodeSwiper
						:swiperItems="swiperItems2"
						indicatorActiveColor="#FB7E22"
						:indicatorWidth="14"
						:indicatorActiveWidth="20"
						:indicatorHeight="10"
						indicatorColor="rgba(216, 228, 231, 1)"
						indicatorPosition="relative"
						:autoplay="false"
						:width="750"
						:height="330"
						@taped="guiComCodeSwiperTaped"
					></guiComCodeSwiper>
				</view>
				<view class="mt-1 mx-3" v-if="merchant == 1 || merchant == 2">
					<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top fx-f-ajc">
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/01.png"></image></button>
							<text class="gui-grids-text btc-black6">待出库</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/02.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">待签收</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/03.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">退/换</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/04.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">已完成</text>
						</view>
					</view>
				</view>
				<view class="mt-1 mx-3">
					<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top fx-f-ajc">
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/11.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">待发货</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/12.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">待签收</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/13.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">退/换</text>
						</view>
						<view class="fx-f-box-25 gui-flex gui-columns gui-align-items-center">
							<button type="default" class="gui-button gui-bg-white height-80"><image class="gui-grids-icon-img" src="/static/images/home/14.png"></image></button>
							<text class="gui-grids-text gui-icons btc-black6">已完成</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import guiComCodeSwiper from '@/components/guiCom/gui-code-swiper.vue';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			swiperItems2: [
				{
					img: '',
					url: '/page/page/index',
					title: '今日分销统计',
					opentype: 'navigate',
					// 判断是不是 总平台
					administration: false,
					// 浏览记录
					browse: 1324,
					// 下单
					placeAnOrder: 5,
					// 预计
					earnings: 500,
					// 可提现金额
					money: 6000,
					//背景颜色
					bgColor: 'code-banner-bg-linear1'
				},
				{
					img: '',
					url: '/page/page/index',
					title: '今日店铺统计',
					opentype: 'navigate',
					// 判断是不是 总平台
					administration: false,
					// 浏览记录
					browse: 1324,
					// 下单
					placeAnOrder: 5,
					// 预计
					earnings: 500,
					// 可提现金额
					money: 6000,
					//背景颜色
					bgColor: 'code-banner-bg-linear2'
				},
				{
					img: '',
					url: '/page/page/index',
					title: '今日总平台统计',
					opentype: 'navigate',
					administration: true,
					// 浏览记录
					browse: 1324,
					// 下单
					placeAnOrder: 5,
					// 预计
					earnings: 500,
					// 可提现金额
					money: 6000,
					//背景颜色
					bgColor: 'code-banner-bg-linear3'
				}
			]
		};
	},
	computed: {
		...mapGetters(['loginStatus', 'userInfo', 'merchant'])
	},
	onReady: function() {},
	onLoad: function() {
		// 根据用户等级  去请求统计接口
		this.statisticalData();
		console.log('userInfo', this.userInfo);
	},
	methods: {
		// 个人中心轮播图 点击事件、
		guiComCodeSwiperTaped(e) {
			console.log(e);
		},
		async statisticalData() {
			let dataArr = [];
			this.getDistribution();
			// merchant  0 用户  1 商户  2管理员
			if (this.merchant == 1) {
				this.getCommercialTenant();
			} else if (this.merchant == 2) {
				this.getCommercialTenant();
				this.getTotalPlatform();
			}
			this.getOreadData();
		},
		// 获取用户分销信息 统计
		async getDistribution() {},
		// 获取商户信息 统计
		async getCommercialTenant() {},
		// 获取总平台信息 统计
		async getTotalPlatform() {},
		// 获取订单状态管理
		async getOreadData() {}
	},
	components: {
		guiComCodeSwiper
	}
};
</script>
<style lang="scss" scoped>
/* 引入动画库 */
@import '@/GraceUI5/css/animate.css';

.animateInfinite {
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

.logo-btn {
	background: #fb7e22;
	border: none;
	font-size: 30rpx;
	color: #ffffff;
}

.upgrade-title {
	font-size: 24rpx;
	color: #606266;
}
.box-radius-button-30 {
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
	}
</style>
